<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello World!</title>
    <!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
    <!-- <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'" /> -->
    <!-- <meta http-equiv="X-Content-Security-Policy" content="default-src 'self'; script-src 'self'" /> -->
  </head>
  <style type="text/css">
    html,
    body {
      padding: 0;
      margin: 0;
    }
    #app {
      width: 100vw;
      height: 100vh;
      display: flex;
      flex-direction: column;
    }
    #browser-head {
      height: 30px;
      display: flex;
      max-width: 100%;
      margin: 20px;
    }
    #browser-head > input {
      flex: 1;
      margin-right: 10px;
    }
    #browser-content {
      margin: 0 20px;
      flex: 1;
    }
  </style>
  <body>
    <div id="app">
      <div id="browser-head">
        <input type="url" class="url-input" />
        <button id="go">GO</button>
      </div>
      <canvas id="browser-content" width="600" height="600"></canvas>
    </div>

    <!-- You can also require other files to run in this process -->
    <script src="./dist/renderer.js"></script>
  </body>
</html>
